<template>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <el-form inline>
            <el-form-item>
                <el-input placeholder="角色名称" size="normal" v-model="searchObj.roleName"></el-input>
            </el-form-item>
            <el-from-item style="margin-right:10px">
                <el-button type="primary" size="default" class="el-icon-search" @click="searchRole">查询</el-button>
            </el-from-item>
            <el-from-item>
                <el-button size="default" plain @click="clear">清空</el-button>
            </el-from-item>
        </el-form>

        <div style="margin-bottom:20px">
            <el-button type="primary" size="small" @click="addUser">添加</el-button>
            <el-button type="danger" size="small" plain @click="deleteAll">批量删除
            </el-button>
        </div>
        <!-- 表格 -->
        <el-table border stripe :data="this.roleList">
            <el-table-column type="selection" width="100px"></el-table-column>
            <el-table-column label="序号" type="index" width="100px"></el-table-column>
            <el-table-column label="角色名称" prop="roleName"></el-table-column>
            <el-table-column label="操作">
                <template>
                    <el-button type="info" size="small" class="el-icon-info"></el-button>
                    <el-button type="warning" class="el-icon-edit-outline" size="small" style="margin-right:10px">
                    </el-button>
                    <el-popconfirm title="`确定要删除吗？`" width="250px" :icon="Delete">
                        <el-button type="danger" size="small" slot="reference" class="el-icon-delete"></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>


    </el-card>

</template>

<script>
export default {
data() {
    return {
        roleList:[],  //角色列表
        page:1,
        limit:5,
        total:0,
        searchObj:{  //要查询的角色
            roleName:''
        },
    }
},
mounted() {
  this.getRoleList()  
},
methods: {
    //获取角色列表
    async getRoleList(){
        let result =await this.$API.role.getPageList(this.page,this.limit,this.searchObj)
        const {total,items} = result.data
        this.roleList = items
        this.total = total
    },
    //查询角色
    async searchRole(){
        this.searchObj = { ...this.searchObj }
        this.getRoleList()
    }
},
}
</script>

<style>

</style>